<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/jquery-1.12.3.min.js"></script>
    <script src="./js/jquery-validation/jquery.validate.js"></script>
    <script src="./js/jquery-validation/additional-methods.js"></script>
    <script src="./js/layer/layer.js"></script>
    <style>
        label.error {
            color: red;
        }
        em{
            font-style: normal;
        }
        em.error {
            background: url("https://www.runoob.com/try/jquery/plugins/images/unchecked.gif") no-repeat 0px 0px;
            padding-left: 16px;
        }

        em.success {
            background: url("https://www.runoob.com/try/jquery/plugins/images/checked.gif") no-repeat 0px 0px;
            padding-left: 16px;
        }
    </style>
</head>

<body>


<form>
    <p>
        <label>
            用户名 :<input name="uname">
        </label>
    </p>

    <p>
        <label>
            密码 :<input type="password" name="upwd" id="upwd">
        </label>
    </p>

    <p>
        <label>
            确认密码 :<input type="password" name="upwd2">
        </label>
    </p>

    <p>
        <label>
            性别 :<input name="usex" value="女" type="radio" checked>女
            <input name="usex" value="男" type="radio">男
        </label>
    </p>


    <p>
        <label>
            爱好 :
            <input name="uhobby" value="羽毛球" type="checkbox" checked>羽毛球
            <input name="uhobby" value="篮球" type="checkbox">篮球
            <input name="uhobby" value="乒乓球" type="checkbox">乒乓球

        </label>
    </p>

    <p>
        <label>
            邮箱 :<input name="uemail">
        </label>
    </p>

    <p>
        <label>
            手机号 :<input name="utelphone">
        </label>
    </p>

    <p>
        <label>
            真实姓名 :<input name="ureallyname">
        </label>
    </p>

    <p>
        <button>注册</button>
    </p>
</form>
</body>

</html>

<script>
    $(function () {
        //自己定义的检测用户的规则
        $.validator.addMethod("checkedUser", function (val) {
            //字母开头不能是数字开头
            return /^[a-z]\w{5,17}$/i.test(val)

        })

        $.validator.addMethod("checkedChinese", function (val) {
            //字母开头不能是数字开头
            return /^[\u4e00-\u9fa5]+$/.test(val)

        })

        $("form").validate({
            // rules 规则

            rules: {
                uname: {
                    required: true, //必填
                    checkedUser: true,
                    remote: { //就是 ajax ,只是 data有点不同
                        url: "./../server/exitsUser.php",
                        type: 'get',
                        data: {
                            uname: function () {
                                return $("[name='uname']").val();
                            }
                        }
                    }
                },
                upwd: {
                    required: true, //必填
                    rangelength: [6, 16]
                },
                upwd2: {
                    required: true, //必填
                    rangelength: [6, 16],
                    equalTo: "#upwd" //当前框要与指定的框,的内容一致
                },
                uemail: {
                    email: true
                },
                utelphone: {
                    digits: true,
                    rangelength: [11, 11]
                },
                ureallyname: {
                    checkedChinese: true
                }
            },
            // messages 规则是否合法 问题提示
            messages: {
                uname: {
                    required: "用户名必填",
                    checkedUser: "用户名必须字母开头,6-18位",
                    remote: "改用户已存在"
                },
                upwd: {
                    required: "密码必填", //必填
                    rangelength: "密码长度必须是{0}-{1}"

                },
                upwd2: {
                    required: "密码必填", //必填
                    rangelength: "密码长度必须是{0}-{1}",
                    equalTo: "2次密码不一致哦" //当前框要与指定的框,的内容一致
                },
                uemail: {
                    email: "您的邮箱格式不合法"
                },
                utelphone: {
                    digits: "手机号,必须是数字",
                    rangelength: "手机号,必须是11位"
                },
                ureallyname: {
                    checkedChinese: "必须是中文"
                }
            },
            //submitHandler 提交
            submitHandler: function () {
                //准备参数,通过ajax发送服务器上
                $.ajax({
                    url: "./../server/registerServer.php",
                    type: "post",
                    data: $("form").serialize(),
                    dataType: "json"
                }).then(function (res) {
                    layer.msg(res.msg);
                })
                return false;
            },

            // errorContainer: $(".box"),
            errorPlacement: function (error, element) {
                console.log(error, element)
                // error.appendTo(element);
                element.after(error)
            },
            success: function (label) {
                label.addClass("success");
            },
        })
    })
</script>